<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				padding: 0;
				margin: 0;
			}
			
			div{
				width: 300px;
				height: 300px;
				background: pink;
				position: absolute;
				display: none;
			}
		</style>
	</head>
	<body>
		<button>开</button>
		<div></div>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi voluptates quidem quae perferendis repudiandae asperiores ex mollitia iusto eos ab magnam provident error hic sint esse obcaecati quas eveniet aspernatur?
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi voluptates quidem quae perferendis repudiandae asperiores ex mollitia iusto eos ab magnam provident error hic sint esse obcaecati quas eveniet aspernatur?
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi voluptates quidem quae perferendis repudiandae asperiores ex mollitia iusto eos ab magnam provident error hic sint esse obcaecati quas eveniet aspernatur?
		
		<script type="text/javascript">
			var but=document.getElementsByTagName("button")[0];
			var div=document.getElementsByTagName("div")[0];
			
			but.onclick=function(){
				if(but.innerHTML=="开"){
					but.innerHTML="关";
					div.style.display="block";
				}else{
					but.innerHTML="开";
					div.style.display="none";
				}
			}
		</script>
	</body>
</html>
